<template>
  <view class="swiper-wrap">
		<swiper class="swiper-container" :interval="300" :duration="1000" :current="currentIndex" @change="handleChange">
			<swiper-item v-for="(item, index) of list" :key="item.topicId">
				<scroll-view scroll-y class="scroll-container">
					<view class="container">
							<view class="title-wrap">
								<view class="type"><text>{{item.topicType === 1? '单选':'多选'}}</text>{{index + 1}}.{{item.topicContent}}</view>
							</view>
							<view class="select" v-for="(subItem, subIndex) of item.topicAnswerVos" :key="subItem.answerId" @click="handleSelect(index, subIndex, subItem)">
								<view class="select-type">{{options[subIndex]}}</view>
								<view class="desc">{{subItem.answerContent}}</view>
								<image class="image" v-if="isSubmit && getAnswer(item.topicAnswerVos).index === subIndex" src="/static/images/common/success.png"></image>
								<image class="image" v-if="isSubmit && getAnswer(item.topicAnswerVos).index !== subIndex" src="/static/images/common/fail.png"></image>
							</view>
							<view class="next-wrap" @click="handleNext(index)">
								<view>
									<text v-if="item.subCurrentIndex > -1">您选择了{{options[item.subCurrentIndex]}}选项</text>
								</view>
								<view class="next">{{ index === list.length - 1 ? '提交' :'下一题' }}</view>
							</view>
							<view v-if="isSubmit" class="explain">
								<view class="explain-title">试题详解</view>
								<view class="explain-info">
									<view class="answer">答案{{ getAnswer(item.topicAnswerVos).answer }}</view>
									<view class="explain-info-text">{{item.topicAnalysis}}</view>
								</view>
							</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
  name: 'swiper',
  props:{
    list: {
      type: Array,
      default() {
				return []
			}
    }
  },
  data() {
    return {
			currentIndex: 0,
			isSubmit: false,
			options: ['A', 'B', 'C', 'D'],
			aswerArr: [],
			score: 0
    }
	},
	methods:{
		handleChange(e) {
			const index = e.detail.current
			this.currentIndex = index
		},
		getAnswer (arr) {
			const answer = this.options
			const index = arr.findIndex((item) => {
				return item.answerFraction > 0
			})
			return {
				answer: answer[index],
				index
			}
		},
		handleNext(index) {
			if (index === 4) {
				this.isSubmit = true
				this.score = 0
				this.aswerArr.map((item) => {
					if (item) {
						this.score+=20;
					}
				})
				uni.showToast({
					title: `您的分数为${this.score}分`,
					icon: 'none'
				})
			} else {
				this.currentIndex+=1
			}
			
		},
		handleSelect(index, subIndex,item) {
			const flag = item.answerFraction > 0
			this.aswerArr[index] = flag
			this.$emit('updateList', {index, subIndex})
		}
	}
}

</script>
<style lang='scss' scoped>
  .swiper-wrap {
    width: 100%;
    height: calc(100vh - 160upx);
		.swiper-container{
			width: 100%;
			height: 100%;
			.scroll-container{
				width: 100%;
				height: 100%;
				.container{
					width: 100%;
					padding: 0 40upx 20upx;
					box-sizing: border-box;
				}
        .title-wrap{
          width: 100%;
					margin-bottom: 30upx;
					.type{
						width: 100%;
						line-height: 68upx;
						font-size: 38upx;
						color: #333;
					}
          text{
						display: inline-block;
            width:80upx;
            height:40upx;
            background:rgba(13,132,213,1);
            border-radius:20upx 0px 20upx 0px;
            font-size:25upx;
            text-align: center;
            line-height: 40upx;
            color:#fff;
						margin-right: 18upx;
          }
        }
				.select{
					display: flex;
					align-items: center;
					min-height: 102upx;
					margin-bottom: 30upx;
					.select-type {
						width:42upx;
						height:42upx;
						border:1px solid rgba(102,102,102,1);
						border-radius:50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 42upx;
					}
					.image{
						width:42upx;
						height:42upx;
						border-radius:50%;
						margin-right: 42upx;
						border: none;
					}
					.desc{
						flex: 1;
						font-size: 38upx;
						font-weight:500;
					}
					&:active{
						background-color: #f5f5f5;
					}
				}
				.next-wrap{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.next{
						width:104upx;
						height:44upx;
						background:rgba(13,132,213,1);
						border-radius:10upx;
						font-size: 25upx;
						color:#fff;
						line-height: 44upx;
						text-align: center;
					}
					text{
						font-size: 30upx;
						color:#333;
					}
				}
				.explain{
					.explain-title {
						font-size: 31upx;
						color:#333;
						margin-bottom: 40upx;
						font-weight:800;
					}
					.explain-info{
						width: 100%;
						background-color: #f0f0f0;
						padding:12upx 52upx 42upx 23upx;
						border-radius: 10upx;
						box-sizing: border-box;
						.answer{
							font-size: 30upx;
							line-height: 90upx;
							color: #333;
							font-weight:800;
						}
						.explain-info-text{
							color:#999;
							font-size: 38upx;
							line-height: 67upx;
						}
					}
				}
			}
		}
  }
</style>